<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Constructor | SimpleMindMap</title>
    <meta name="description" content="A powerful web mind map">
    <meta name="generator" content="VitePress v1.3.3">
    <link rel="preload stylesheet" href="/mind-map-docs/assets/style.m6R34cWr.css" as="style">
    
    <script type="module" src="/mind-map-docs/assets/app.CayW-_xc.js"></script>
    <link rel="preload" href="/mind-map-docs/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/mind-map-docs/assets/chunks/theme.iyWGNaji.js">
    <link rel="modulepreload" href="/mind-map-docs/assets/chunks/framework.B358x4hV.js">
    <link rel="modulepreload" href="/mind-map-docs/assets/en_api_constructor_constructor-options.md.C82q4Cdk.lean.js">
    <link rel="icon" href="/mind-map-docs/logo.png">
    <script src="//sdk.51.la/js-sdk-pro.min.js" charset="UTF-8" id="LA_COLLECT"></script>
    <script>try{LA.init({id:"KRO0WxK8GT66tYCQ",ck:"KRO0WxK8GT66tYCQ",autoTrack:!1})}catch(t){console.log(t)}</script>
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar top" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle has-sidebar" data-v-6aa21345 data-v-ab179fa1><a class="title" href="/mind-map-docs/en/" data-v-ab179fa1><!--[--><!--]--><!--[--><img class="VPImage logo" src="/mind-map-docs/logo.png" alt data-v-8426fc1a><!--]--><span data-v-ab179fa1>SimpleMindMap</span><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6aa21345 data-v-dc692963><span id="main-nav-aria-label" class="visually-hidden" data-v-dc692963> Main Navigation </span><!--[--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://wanglin2.github.io/mind-map/" target="_blank" rel="noreferrer" tabindex="0" data-v-dc692963 data-v-9c663999><!--[--><span data-v-9c663999>Online use</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/mind-map-docs/en/client.html" tabindex="0" data-v-dc692963 data-v-9c663999><!--[--><span data-v-9c663999>Client</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/mind-map-docs/cloudStorage.html" tabindex="0" data-v-dc692963 data-v-9c663999><!--[--><span data-v-9c663999>Cloud storage</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/mind-map-docs/en/start/introduction.html" tabindex="0" data-v-dc692963 data-v-9c663999><!--[--><span data-v-9c663999>Start</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/mind-map-docs/course/course1.html" tabindex="0" data-v-dc692963 data-v-9c663999><!--[--><span data-v-9c663999>Course</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/mind-map-docs/en/api/constructor/constructor-options.html" tabindex="0" data-v-dc692963 data-v-9c663999><!--[--><span data-v-9c663999>API</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/mind-map-docs/en/plugins/themes.html" tabindex="0" data-v-dc692963 data-v-9c663999><!--[--><span data-v-9c663999>Plugins</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/mind-map-docs/help/help1.html" tabindex="0" data-v-dc692963 data-v-9c663999><!--[--><span data-v-9c663999>Help</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/mind-map-docs/sponsor.html" tabindex="0" data-v-dc692963 data-v-9c663999><!--[--><span data-v-9c663999>Sponsor</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-dc692963 data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-b6c34ac9><span class="text" data-v-b6c34ac9><!----><span data-v-b6c34ac9>More</span><span class="vpi-chevron-down text-icon" data-v-b6c34ac9></span></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-b98bc113><div class="items" data-v-b98bc113><!--[--><!--[--><div class="VPMenuLink" data-v-b98bc113 data-v-43f1e123><a class="VPLink link" href="/mind-map-docs/en/blog.html" data-v-43f1e123><!--[-->Blog<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-b98bc113 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://github.com/wanglin2/lx-doc" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->Ideal Document<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-b98bc113 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://github.com/wanglin2/mind-map/issues" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->Issues<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><div class="VPFlyout VPNavBarTranslations translations" data-v-6aa21345 data-v-88af2de4 data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="Change language" data-v-b6c34ac9><span class="text" data-v-b6c34ac9><span class="vpi-languages option-icon" data-v-b6c34ac9></span><!----><span class="vpi-chevron-down text-icon" data-v-b6c34ac9></span></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-b98bc113><!----><!--[--><!--[--><div class="items" data-v-88af2de4><p class="title" data-v-88af2de4>English</p><!--[--><div class="VPMenuLink" data-v-88af2de4 data-v-43f1e123><a class="VPLink link" href="/mind-map-docs/api/constructor/constructor-options.html" data-v-43f1e123><!--[-->中文<!--]--></a></div><!--]--></div><!--]--><!--]--></div></div></div><div class="VPNavBarAppearance appearance" data-v-6aa21345 data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-6aa21345 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/wanglin2/mind-map" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><span class="vpi-social-github" /></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-b98bc113><!----><!--[--><!--[--><div class="group translations" data-v-bb2aa2f0><p class="trans-title" data-v-bb2aa2f0>English</p><!--[--><div class="VPMenuLink" data-v-bb2aa2f0 data-v-43f1e123><a class="VPLink link" href="/mind-map-docs/api/constructor/constructor-options.html" data-v-43f1e123><!--[-->中文<!--]--></a></div><!--]--></div><div class="group" data-v-bb2aa2f0><div class="item appearance" data-v-bb2aa2f0><p class="label" data-v-bb2aa2f0>Dark mode</p><div class="appearance-action" data-v-bb2aa2f0><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-bb2aa2f0 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div></div></div><div class="group" data-v-bb2aa2f0><div class="item social-links" data-v-bb2aa2f0><div class="VPSocialLinks social-links-list" data-v-bb2aa2f0 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/wanglin2/mind-map" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><span class="vpi-social-github" /></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-17a5e62e><button data-v-17a5e62e>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-319d5ca6><div class="curtain" data-v-319d5ca6></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-319d5ca6><span class="visually-hidden" id="sidebar-aria-label" data-v-319d5ca6> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 has-active" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>API</h2><!----></div><div class="items" data-v-b7550ba0><!--[--><section class="VPSidebarItem level-1 has-active" data-v-b7550ba0 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h3 class="text" data-v-b7550ba0>Constructor</h3><!----></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/mind-map-docs/en/api/constructor/constructor-options.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Options</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/mind-map-docs/en/api/constructor/constructor-props.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Props</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/mind-map-docs/en/api/constructor/constructor-methods.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Methods</p><!--]--></a><!----></div><!----></div><!--]--></div></section><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/mind-map-docs/en/api/node.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Node class</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/mind-map-docs/en/api/render.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Render clas</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/mind-map-docs/en/api/command.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Command clas</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/mind-map-docs/en/api/textEdit.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>TextEdit clas</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/mind-map-docs/en/api/view.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>View clas</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/mind-map-docs/en/api/keyCommand.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>KeyCommand clas</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/mind-map-docs/en/api/batchExecution.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>BatchExecution clas</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/mind-map-docs/en/api/xmind.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>XMind parse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/mind-map-docs/en/api/markdown.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Markdown parse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/mind-map-docs/en/api/utils.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Utility methods</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-a5bbad30><div class="content" data-v-a5bbad30><div class="outline-marker" data-v-a5bbad30></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-a5bbad30>Outline</div><ul class="VPDocOutlineItem root" data-v-a5bbad30 data-v-b933a997><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _mind-map-docs_en_api_constructor_constructor-options" data-v-39a288b8><div><h1 id="constructor" tabindex="-1">Constructor <a class="header-anchor" href="#constructor" aria-label="Permalink to &quot;Constructor&quot;">​</a></h1><h2 id="basic-use" tabindex="-1">Basic use <a class="header-anchor" href="#basic-use" aria-label="Permalink to &quot;Basic use&quot;">​</a></h2><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;mindMapContainer&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> MindMap </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;simple-mind-map&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> mindMap</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MindMap</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  el: document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getElementById</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;mindMapContainer&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  data: {</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">    &quot;data&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">        &quot;text&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Root Node&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">    &quot;children&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: []</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h3 id="special-reminder" tabindex="-1">Special Reminder <a class="header-anchor" href="#special-reminder" aria-label="Permalink to &quot;Special Reminder&quot;">​</a></h3><p>Node tree rendering is an asynchronous operation, so it is not possible to immediately call some operations that require node rendering to be completed after instantiation, otherwise errors and unknown phenomena may occur, You need to listen for the &#39;node_tree_render_end&#39; event and wait until the node tree rendering is complete before proceeding. In addition to instantiation, other methods such as &#39;setData&#39;, &#39;updateData&#39;, &#39;render&#39;, etc. are asynchronous and need to be handled in this way.</p><h2 id="instantiation-options" tabindex="-1">Instantiation options <a class="header-anchor" href="#instantiation-options" aria-label="Permalink to &quot;Instantiation options&quot;">​</a></h2><h3 id="_1-base" tabindex="-1">1.Base <a class="header-anchor" href="#_1-base" aria-label="Permalink to &quot;1.Base&quot;">​</a></h3><table tabindex="0"><thead><tr><th>Field Name</th><th>Description</th><th>Type</th><th>Default Value</th></tr></thead><tbody><tr><td>el</td><td>Container element, must be a DOM element（When the position of container elements on the page has changed but the size has not changed, the &#39;getElRectInfo()&#39; method must be called to update the relevant information inside the library; When the size also changes, the &#39;resize()&#39; method must be called, otherwise it will cause some functional exceptions）</td><td>Element</td><td></td></tr><tr><td>data</td><td>Mind map data, Please refer to the introduction of 【Data structure】 below. V0.9.9+supports passing empty objects or null, and the canvas will display blank space</td><td>Object 、null</td><td></td></tr><tr><td>viewData</td><td>View data can be used to restore the position and zoom of the canvas. This data can be obtained through method <code>mindMap.view.getTransformData()</code></td><td>Object 、 null</td><td></td></tr><tr><td>layout</td><td>Layout type, options: logicalStructure (logical structure diagram), logicalStructureLeft(v0.10.2+, Leftward logical structure diagram), mindMap (mind map), catalogOrganization (catalog organization diagram), organizationStructure (organization structure diagram)、timeline（v0.5.4+, timeline）、timeline2（v0.5.4+, up down alternating timeline）、fishbone（v0.5.4+, fishbone diagram）</td><td>String</td><td>logicalStructure</td></tr><tr><td>fishboneDeg（v0.5.4+）</td><td>Set the diagonal angle of the fishbone structure diagram</td><td>Number</td><td>45</td></tr><tr><td>theme</td><td>Theme, v0.12.0+ extract the built-in themes from the library into separate plugins(simple-mind-map-plugin-themes, Please refer to the plugin documentation for details), The library only has default themes(default), Version libraries below v0.12.0 have built-in optional theme lists: default, classic, minions, pinkGrape, mint, gold, vitalityOrange, greenLeaf, dark2, skyGreen, classic2, classic3, classic4(v0.2.0+), classicGreen, classicBlue, blueSky, brainImpairedPink, dark, earthYellow, freshGreen, freshRed, romanticPurple, simpleBlack(v0.5.4+), courseGreen(v0.5.4+), coffee(v0.5.4+), redSpirit(v0.5.4+), blackHumour(v0.5.4+), lateNightOffice(v0.5.4+), blackGold(v0.5.4+)、、avocado(v.5.10-fix.2+)、autumn(v.5.10-fix.2+)、orangeJuice(v.5.10-fix.2+)</td><td>String</td><td>default</td></tr><tr><td>themeConfig</td><td>Theme configuration, will be merged with the selected theme, available fields refer to: <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/theme/default.js" target="_blank" rel="noreferrer">default.js</a></td><td>Object</td><td>{}</td></tr><tr><td>scaleRatio</td><td>The incremental scaling ratio</td><td>Number</td><td>0.1</td></tr><tr><td>translateRatio（v0.11.2+）</td><td>The step size ratio of translation is only applied in the translation triggered by the mouse wheel and touchpad</td><td>Number</td><td>1</td></tr><tr><td>minZoomRatio（v0.11.2+）</td><td>The minimum reduction value, percentage, and minimum value are 0. This option only affects the view.narrow method (affecting the behavior of Ctrl+- shortcut keys, mouse wheel, and touchpad), It will not affect other methods, such as view.setScale, and you need to limit the size passed in by yourself</td><td>Number</td><td>20</td></tr><tr><td>maxZoomRatio（v0.11.2+）</td><td>Maximum amplification value, percentage, passing -1 represents no restriction, otherwise passing numbers above 0 will only affect the view.enlarge method</td><td>Number</td><td>400</td></tr><tr><td>customCheckIsTouchPad（v0.11.2+）</td><td>Customize the judgment of whether the wheel event comes from the touchpad of the computer. The default method is to judge whether the value of e.deltaY is less than 10. Obviously, this method is inaccurate. When the mouse scrolls slowly or the touch moves quickly, the judgment fails. If you have a better method, please submit an issue. If you want to judge for yourself, you can pass a function that takes a parameter e (event object) and returns true or false, representing whether it is from the touchpad</td><td>Function、Null</td><td></td></tr><tr><td>maxTag</td><td>The maximum number of tags displayed in the node, any additional tags will be discarded</td><td>Number</td><td>5</td></tr><tr><td>tagPosition（v0.10.3+）</td><td>The position of the tag display relative to the node text，bottom（Below the text）、right（On the right side of the text）</td><td>String</td><td>right</td></tr><tr><td>imgTextMargin</td><td>The spacing between the image and text in the node</td><td>Number</td><td>5</td></tr><tr><td>textContentMargin</td><td>The spacing between various text information in the node, such as the spacing between the icon and text</td><td>Number</td><td>2</td></tr><tr><td>customNoteContentShow（v0.1.6+）</td><td>Custom node note content display, object type, structure: {show: (noteContent, left, top, node) =&gt; {// your display node note logic. node is a new parameter added in v0.8.1+ version, representing node instances }, hide: () =&gt; {// your hide node note logic }}</td><td>Object</td><td>null</td></tr><tr><td>readonly（v0.1.7+）</td><td>Whether it is read-only mode</td><td>Boolean</td><td>false</td></tr><tr><td>textAutoWrapWidth（v0.3.4+）</td><td>Each line of text in the node will wrap automatically when it reaches the width</td><td>Number</td><td>500</td></tr><tr><td>customHandleMousewheel（v0.4.3+）</td><td>User-defined mouse wheel event processing can pass a function, and the callback parameter is the event object</td><td>Function</td><td>null</td></tr><tr><td>mousewheelAction（v0.4.3+）</td><td>The behavior of the mouse wheel, <code>zoom</code>(Zoom in and out)、<code>move</code>(Move up and down). If <code>customHandleMousewheel</code> passes a custom function, this property will not take effect</td><td>String</td><td>zoom（v0.9.1+ default is move）</td></tr><tr><td>mousewheelMoveStep（v0.4.3+）</td><td>When the <code>mousewheelAction</code> is set to <code>move</code>, you can use this attribute to control the step length of the view movement when the mouse scrolls. The unit is <code>px</code></td><td>Number</td><td>100</td></tr><tr><td>mousewheelZoomActionReverse（v0.6.5+）</td><td>When <code>mousewheelAction</code> is set to <code>zoom</code>, Or when holding down the Ctrl key, the default scrolling forward is to zoom out, and scrolling backward is to zoom in. If this property is set to true, it will be reversed</td><td>Boolean</td><td>false（v0.9.1+ default is true）</td></tr><tr><td>defaultInsertSecondLevelNodeText（v0.4.7+）</td><td>Text of the default inserted secondary node</td><td>String</td><td>二级节点</td></tr><tr><td>defaultInsertBelowSecondLevelNodeText（v0.4.7+）</td><td>Text for nodes below the second level inserted by default</td><td>String</td><td>分支主题</td></tr><tr><td>expandBtnStyle（v0.5.0+）</td><td>Expand the color of the stow button, (The fontSize and strokeColor fields were added in version 0.7.0+to set the text style for displaying the number of nodes when folded)</td><td>Object</td><td>{ color: &#39;#808080&#39;, fill: &#39;#fff&#39;, fontSize: 13, strokeColor: &#39;#333333&#39; }</td></tr><tr><td>expandBtnIcon（v0.5.0+）</td><td>Customize the icon of the expand/collapse button, and you can transfer the svg string of the icon (When the node is collapsed, render the open icon, and when it is expanded, render the close icon)</td><td>Object</td><td>{ open: &#39;&#39;, close: &#39;&#39; }</td></tr><tr><td>expandBtnNumHandler（v0.7.0+）</td><td>Used to customize the display of the number of nodes when collapsed, a function can be passed. Versions before v0.11.1 receive a parameter representing the total number of all descendant nodes of the collapsed node, while versions v0.11.1+receive two parameters. The first parameter still has the total number of descendant nodes, and the second parameter is the instance of the node. Need return a number or string that represents the final displayed content. For example, when the number is greater than 99, 99 can be displayed+</td><td>Function</td><td></td></tr><tr><td>isShowExpandNum（v0.7.0+）</td><td>Display the number of folded nodes when they are folded up</td><td>Boolean</td><td>true</td></tr><tr><td>enableShortcutOnlyWhenMouseInSvg（v0.5.1+）</td><td>Only respond to shortcut key events when the mouse is inside the canvas</td><td>Boolean</td><td>true</td></tr><tr><td>enableNodeTransitionMove（v0.5.1+）（v0.6.7+ is remove this feature）</td><td>Whether to enable node animation transition</td><td>Boolean</td><td>true</td></tr><tr><td>nodeTransitionMoveDuration（v0.5.1+）（v0.6.7+ is remove this feature）</td><td>If node animation transition is enabled, the transition time can be set using this attribute, in milliseconds</td><td>Number</td><td>300</td></tr><tr><td>initRootNodePosition（v0.5.3+）</td><td>The position of the initial root node can be passed as an array, default is <code>[&#39;center&#39;, &#39;center&#39;]</code>, Represents the root node at the center of the canvas, In addition to <code>center</code>, keywords can also be set to <code>left</code>, <code>top</code>, <code>right</code>, and <code>bottom</code>, In addition to passing keywords, each item in the array can also pass a number representing a specific pixel, Can pass a percentage string, such as <code>[&#39;40%&#39;, &#39;60%&#39;]</code>, Represents a horizontal position at <code>40%</code> of the canvas width, and a vertical position at <code>60%</code> of the canvas height</td><td>Array</td><td>null</td></tr><tr><td>nodeTextEditZIndex（v0.5.5+）</td><td>z-index of node text edit box elements</td><td>Number</td><td>3000</td></tr><tr><td>nodeNoteTooltipZIndex（v0.5.5+）</td><td>z-index of floating layer elements in node comments</td><td>Number</td><td>3000</td></tr><tr><td>isEndNodeTextEditOnClickOuter（v0.5.5+）</td><td>Whether to end the editing status of node text when clicking on an area outside the canvas</td><td>Boolean</td><td>true</td></tr><tr><td>maxHistoryCount（v0.5.6+）</td><td>Maximum number of history records</td><td>Number</td><td>1000（v0.9.2+ changed 500）</td></tr><tr><td>alwaysShowExpandBtn（v0.5.8+）</td><td>Whether to always display the expand and collapse buttons of nodes, which are only displayed when the mouse is moved up and activated by default</td><td>Boolean</td><td>false</td></tr><tr><td>iconList（v0.5.8+）</td><td>The icons that can be inserted into the extension node, and each item in the array is an object. Please refer to the &quot;Icon Configuration&quot; table below for the detailed structure of the object</td><td>Array</td><td>[]</td></tr><tr><td>maxNodeCacheCount（v0.5.10+）</td><td>The maximum number of cached nodes. To optimize performance, an internal node cache pool is maintained to reuse nodes. This attribute allows you to specify the maximum number of caches in the pool</td><td>Number</td><td>1000</td></tr><tr><td>fitPadding（v0.6.0+）</td><td>The padding of mind mapping when adapting to canvas size, Unit: px</td><td>Number</td><td>50</td></tr><tr><td>enableCtrlKeyNodeSelection（v0.6.0+）</td><td>Whether to enable the function of holding down the Ctrl key to select multiple nodes</td><td>Boolean</td><td>true</td></tr><tr><td>useLeftKeySelectionRightKeyDrag（v0.6.0+）</td><td>Setting to left click to select multiple nodes and right click to drag the canvas.</td><td>Boolean</td><td>false</td></tr><tr><td>beforeTextEdit（v0.6.0+）</td><td>The callback method before the node is about to enter editing. If the method returns a value other than true, the editing will be canceled. The function can return a value or a promise, and the callback parameter is the node instance</td><td>Function/null</td><td>null</td></tr><tr><td>isUseCustomNodeContent（v0.6.3+）</td><td>Whether to customize node content</td><td>Boolean</td><td>false</td></tr><tr><td>customCreateNodeContent（v0.6.3+）</td><td>If <code>isUseCustomNodeContent</code> is set to <code>true</code>, then this option needs to be used to pass in a method that receives the node instance <code>node</code> as a parameter (if you want to obtain data for that node, you can use <code>node.nodeData.data</code>). You need to return the custom node content element, which is the DOM node. If a node does not require customization, you can return <code>null</code></td><td>Function/null</td><td>null</td></tr><tr><td>mouseScaleCenterUseMousePosition（v0.6.4-fix.1+）</td><td>Is the mouse zoom centered around the current position of the mouse, otherwise centered around the canvas</td><td>Boolean</td><td>true</td></tr><tr><td>customInnerElsAppendTo（v0.6.12+）</td><td>Specify the location where some internal elements (node text editing element, node note display element, associated line text editing element, node image adjustment button element) are added, and default to document.body</td><td>null/HTMLElement</td><td>null</td></tr><tr><td>enableCreateHiddenInput（v0.6.13+）（v0.6.14+ remove this feature）</td><td>Is it allowed to create a hidden input box that will be focused when the node is activated for pasting data and automatically entering the text editing state</td><td>Boolean</td><td>true</td></tr><tr><td>enableAutoEnterTextEditWhenKeydown（v0.6.13+）</td><td>Does it automatically enter text editing mode when pressing the Chinese, English, or numeric buttons when there is an activation node?</td><td>Boolean</td><td>true</td></tr><tr><td>customHandleClipboardText（v0.6.14+）</td><td>Customize the processing of clipboard text. When pressing ctrl+v to paste, it will read the text and images from the user&#39;s clipboard. By default, it will only determine whether the text is regular text and node data in simple mind map format. If you want to process data from other mind maps, such as process, zhixi, etc., you can pass a function that takes the text from the current clipboard as a parameter and returns the processed data, which can be of two types: 1.If a pure text is returned, a child node will be directly created with that text; 2.Returns a node object in the following format: { simpleMindMap: true, data: { data: { text: &#39;&#39; }, children: [] } }, The representative is data in simple bind map format, and the node data is in the same format as the simple bind map node data. If your processing logic has asynchronous logic, you can also return a promise</td><td>Function</td><td>null</td></tr><tr><td>errorHandler（v0.6.15+）</td><td>Custom error handling functions currently only throw some asynchronous logic errors. Can pass a function that takes two parameters, the first being the wrong type and the second being the wrong object</td><td>Function</td><td></td></tr><tr><td>disableMouseWheelZoom（v0.6.15+）</td><td>Prohibit mouse wheel scaling, you can still use the API for scaling</td><td>Boolean</td><td>false</td></tr><tr><td>enableDblclickReset（v0.6.17+）(v0.8.0+this attribute has been deleted)</td><td>Turn on the mouse and double-click to reset the position and zoom of the mind map</td><td>Boolean</td><td>true(v0.7.0+changed to false)</td></tr><tr><td>enableDblclickBackToRootNode（v0.8.0+）</td><td>Whether to return to the root node when double clicking with the mouse, that is, to center the display of the root node</td><td>Boolean</td><td>false</td></tr><tr><td>hoverRectColor（v0.7.0+）</td><td>The node mouse hover and the rectangular border color displayed when activated will add a transparency of 0.6 when hovering</td><td>String</td><td>rgb(94, 200, 248)</td></tr><tr><td>hoverRectPadding（v0.7.0+）</td><td>The distance between the node mouse hover and the displayed rectangular border when activated and the node content</td><td>Number</td><td>2</td></tr><tr><td>selectTextOnEnterEditText（v0.7.0+）</td><td>Is the text selected by default when double-clicking a node to enter node text editing? By default, it will only be selected when creating a new node</td><td>Boolean</td><td>true</td></tr><tr><td>deleteNodeActive（v0.7.1+）</td><td>Enable the function of automatically activating adjacent nodes or parent nodes after deleting nodes</td><td>Boolean</td><td>true</td></tr><tr><td>fit（v0.7.1-fix.2+）</td><td>Is the first rendering scaled to fit the canvas size</td><td>Boolean</td><td>false</td></tr><tr><td>tagsColorMap（v0.7.2+）</td><td>The color of a custom node label can be transferred to an object, where key is the label content to be assigned a color, and value is the color of the label content. If not transferred internally, a corresponding color will be generated based on the label content</td><td>Object</td><td>{}</td></tr><tr><td>cooperateStyle（v0.7.3+）</td><td>The configuration of personnel avatar style during node collaboration editing, with field meanings as follows: avatar size, and if it is a text avatar, the size of the text</td><td>Object</td><td>{ avatarSize: 22, fontSize: 12 }</td></tr><tr><td>onlyOneEnableActiveNodeOnCooperate（v0.9.8+）</td><td>During collaborative editing, the same node cannot be selected by multiple people at the same time</td><td>Boolean</td><td>false</td></tr><tr><td>defaultGeneralizationText（v0.8.0+）</td><td>Insert default text for summary</td><td>String</td><td>概要</td></tr><tr><td>handleIsSplitByWrapOnPasteCreateNewNode（v0.8.0+）</td><td>When creating a new node by pasting text, control whether to automatically split the nodes based on line breaks. If there is a line break, multiple nodes will be created based on the line break. Otherwise, only one node will be created, and a function can be passed to return promise. resolve represents splitting based on line breaks, and reject represents ignoring line breaks</td><td>Function / null</td><td>null</td></tr><tr><td>addHistoryTime（v0.8.0+）</td><td>Only one historical record can be added within the specified time to avoid adding unnecessary intermediate states. Unit: ms</td><td>Number</td><td>100</td></tr><tr><td>isDisableDrag（v0.8.1+）</td><td>Is disable dragging the canvas</td><td>Boolean</td><td>false</td></tr><tr><td>highlightNodeBoxStyle（v0.9.0+）（v0.11.1+ has been removed）</td><td>Highlight box style when the mouse moves into the summary to highlight the node it belongs to</td><td>Object</td><td>{ stroke: &#39;rgb(94, 200, 248)&#39;, fill: &#39;transparent&#39; }</td></tr><tr><td>createNewNodeBehavior（v0.9.1+）</td><td>Behavior when creating a new node. default（By default, newly created nodes will be activated and enter editing mode. If multiple new nodes are created simultaneously, they will only be activated and will not enter editing mode）、notActive（Do not activate newly created nodes）、activeOnly（Only activate newly created nodes and do not enter editing mode）</td><td>String</td><td>default</td></tr><tr><td>defaultNodeImage（v0.9.1-fix.2+）</td><td>Image address, the default image displayed when node image loading fails</td><td>String</td><td></td></tr><tr><td>handleNodePasteImg（v0.9.2+）</td><td>The processing method for pasting images from the clipboard on a node is to convert them into data:URL data and insert them into the node by default. You can use this method to upload image data to the server and save the URL of the image. An asynchronous method can be passed to receive image data of Blob type, and the specified structure needs to be returned: { url, size: {width, height} }</td><td>null or Function</td><td>null</td></tr><tr><td>isLimitMindMapInCanvas（v0.9.2+）</td><td>Whether to limit the mind map within the canvas. For example, when dragging to the right, the leftmost part of the mind map graphic will not be able to continue dragging to the right when it reaches the center of the canvas, and the same applies to other things</td><td>Boolean</td><td>false</td></tr><tr><td>beforeShortcutRun（v0.9.9+）</td><td>The lifecycle function before the shortcut operation is about to be executed, returning true can prevent the operation from executing. The function takes two parameters: key（Shortcut key）、activeNodeList（List of currently activated nodes）</td><td>Function、null</td><td>null</td></tr><tr><td>resetScaleOnMoveNodeToCenter（v0.9.12+）</td><td>Whether to reset the scaling level to 100% when moving nodes to the canvas center, returning to the root node, and other operations（This option actually affects the render. moveNodeToCenter method, and the moveNodeToCenter method itself also has a second parameter, resetScale, to set whether to reset. If the resetScale parameter is not passed, then use resetScaleOnMoveNodeToCenter configuration; otherwise, use resetScale configuration）</td><td>Boolean</td><td>false</td></tr><tr><td>createNodePrefixContent（v0.9.12+）</td><td>Add additional node pre content.Pre content refers to the pre content in the area of the same line as the text, excluding the node image section.You can pass a function that takes the parameters of a node instance, Can return objects in {el, width, height} format, el is a DOM node object, width and height represent the width, height, and numerical type of the content. If custom content is not required, null can also be returned</td><td>Function、null</td><td>null</td></tr><tr><td>createNodePostfixContent（v0.9.12+）</td><td>Add additional node post content.Post content refers to the post content in the area of the same line as the text, excluding the node image section. The usage is the same as createNodePrefixContent</td><td>Function、null</td><td>null</td></tr><tr><td>disabledClipboard（v0.10.2+）</td><td>Is prohibit pasting data from the user&#39;s clipboard and writing copied node data to the user&#39;s clipboard. At this time, only node data from the canvas can be copied and pasted</td><td>Boolean</td><td>false</td></tr><tr><td>customHyperlinkJump（v0.10.2+）</td><td>Customize the jump of hyperlinks. If not passed, the hyperlink will be opened as a new window by default, and a function can be passed, The function takes two parameters: link（The URL of the hyperlink）、node（Node instance to which it belongs）, As long as a function is passed, it will block the default jump</td><td>null、Function</td><td>false</td></tr><tr><td>openPerformance（v0.10.4+）</td><td>Whether to enable performance mode or not, by default, all nodes will be rendered directly, regardless of whether they are in the visible area of the canvas. This will cause a lag when there are a large number of nodes (1000+). If your data volume is large, you can enable performance mode through this configuration, that is, only rendering nodes within the visible area of the canvas, and not rendering nodes beyond it. This will greatly improve rendering speed, but of course, it will also bring some other problems, such as: 1. When dragging or scaling the canvas, real-time calculation and rendering of nodes without nodes will be performed, which will bring some lag; When exporting images, SVG, and PDF, all nodes need to be rendered first, so it may be slower; 3. Other currently undiscovered issues</td><td>Boolean</td><td>false</td></tr><tr><td>performanceConfig（v0.10.4+）</td><td>Performance optimization mode configuration. time（How often do nodes refresh after a view change. Unit:ms）、padding（Still rendering nodes beyond the specified range around the canvas）、removeNodeWhenOutCanvas（Is the node deleted from the canvas after being moved out of the visible area of the canvas）</td><td>Object</td><td>{ time: 250, padding: 100, removeNodeWhenOutCanvas: true }</td></tr><tr><td>notShowExpandBtn（v0.10.6+）</td><td>Is not display the expand/collapse button, higher priority than the &#39;alwaysShowExpandBtn&#39; configuration</td><td>Boolean</td><td>false</td></tr><tr><td>emptyTextMeasureHeightText（v0.11.1+）</td><td>If the node text is empty, in order to avoid the collapse of the height of the blank node, a height will be measured using the text specified in this field</td><td>String</td><td>abc123我和你</td></tr><tr><td>openRealtimeRenderOnNodeTextEdit（v0.11.1+）</td><td>Is the node size and position updated in real-time during node text editing? Enabling it may cause lag when there are a large number of nodes</td><td>Boolean</td><td>false</td></tr><tr><td>mousedownEventPreventDefault（v0.11.2+）</td><td>By default, the container element el will be bound with a mousedown event and its default event will be blocked, which can cause certain problems. For example, if you focus on other input boxes outside the mind map and click on the canvas, it will not trigger defocusing. This option can be used to turn off the blocking. Closing it may also bring certain problems, such as when selecting nodes with the mouse box, the node text may be selected. It depends on how you choose</td><td>Boolean</td><td>true</td></tr><tr><td>onlyPasteTextWhenHasImgAndText（v0.12.0+）</td><td>When pasting data from the user clipboard on an activated node, if both text and images exist, only the text will be pasted and the images will be ignored</td><td>Boolean</td><td>true</td></tr><tr><td>enableDragModifyNodeWidth（v0.12.0+）</td><td>Is it allowed to drag and drop to adjust the width of nodes? In fact, it compresses the width of the text content inside the node. When the width of the text content in the node is compressed to its minimum, it cannot be further compressed. If there is an image in the node, the minimum value is based on the maximum value of the image width and the minimum width of the text content (currently, this feature is only available in two situations: 1. Rich Text mode is enabled, that is, the RichText plugin is registered; 2. Custom node content)</td><td>Boolean</td><td>true</td></tr><tr><td>minNodeTextModifyWidth（v0.12.0+）</td><td>When allowing drag and drop adjustment of node width, this option can be used to set the minimum compression width allowed for node text content</td><td>Number</td><td>20</td></tr><tr><td>maxNodeTextModifyWidth（v0.12.0+）</td><td>Same as minNodeTextModifierWidth, maximum value, passing -1 represents no restriction</td><td>Number</td><td>-1</td></tr></tbody></table><h4 id="_1-1-data-structure" tabindex="-1">1.1 Data structure <a class="header-anchor" href="#_1-1-data-structure" aria-label="Permalink to &quot;1.1 Data structure&quot;">​</a></h4><p>The basic data structure is as follows:</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    text</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// The text of the node can be rich text, which is in HTML format. In this case, richText should be set to true</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    richText</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Is the text of the node in rich text mode</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    expand</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Whether the node is expanded</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    uid</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// The unique ID of the node, which may not be passed, will be generated internally</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [], </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// The format of the icon can be found in the &quot;插入和扩展节点图标&quot; section of the tutorial</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    image</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// URL of the image</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    imageTitle</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// The title of the image can be blank</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    imageSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: { </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// The size of the image</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">      width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// The width of the image, mandatory</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">      height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// The height of the image is mandatory</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">      custom</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // If set to true, the display size of the image is not controlled by the theme, and is based on imageSize.width and imageSize.height</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    hyperlink</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Hyperlink address</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    hyperlinkTitle</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Title of hyperlink</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    note</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Content of remarks</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    tag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [], </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Tag list, Prior to v0.10.3, only string arrays, i.e. [&#39;tag&#39;], were supported. However, v0.10.3+versions support object arrays, i.e. [{text: &#39;tag&#39;, style: {}}]. The specific supported label styles can refer to the &quot;Tag Styles&quot; below</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    generalization</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [{</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// (Arrays are not supported in versions below 0.9.0, and only a single summary data can be set)The summary of the node, if there is no summary, the generalization can be set to null</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Summary Text</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      richText: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Is the text of the node in rich text mode</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">      // ...The fields of other ordinary nodes are supported, But it does not support children</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }],</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    associativeLineTargets</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// If there are associated lines, then it is the uid list of the target node</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    associativeLineText</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Association Line Text</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    // ...For other style fields, please refer to the topic</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  children [</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Child nodes, with consistent structure and root nodes</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      data: {},</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      children: []</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ]</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>If you want to add custom fields, you can add them to the same level as &#39;data&#39; and &#39;children&#39;. If you want to add them to the &#39;data&#39; object, please use the <code>_</code> Name your custom field at the beginning, and it will be used internally to determine whether it is a custom field.</p><h5 id="tag-styles" tabindex="-1">Tag Styles <a class="header-anchor" href="#tag-styles" aria-label="Permalink to &quot;Tag Styles&quot;">​</a></h5><p>The style object of the tag supports the following properties:</p><table tabindex="0"><thead><tr><th>Field Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr></thead><tbody><tr><td>radius</td><td>Number</td><td>3</td><td>The corner size of the tag rectangle</td></tr><tr><td>fontSize</td><td>Number</td><td>12</td><td>Font size, it is recommended that the height of the text should not exceed height</td></tr><tr><td>fill</td><td>String</td><td></td><td>Background color of tag rectangle</td></tr><tr><td>height</td><td>Number</td><td>20</td><td>Height of tag rectangle</td></tr><tr><td>paddingX</td><td>Number</td><td>8</td><td>Horizontal margin, if width is set, this configuration will be ignored</td></tr><tr><td>width</td><td>Number</td><td></td><td>The width of the tag rectangle, if not set, defaults to the width of the text plus paddingX * 2</td></tr></tbody></table><h4 id="_1-2-icon-configuration" tabindex="-1">1.2 Icon Configuration <a class="header-anchor" href="#_1-2-icon-configuration" aria-label="Permalink to &quot;1.2 Icon Configuration&quot;">​</a></h4><table tabindex="0"><thead><tr><th>Field Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr></thead><tbody><tr><td>name</td><td>String</td><td></td><td>The name of the icon group</td></tr><tr><td>type</td><td>String</td><td></td><td>Values for icon grouping</td></tr><tr><td>list</td><td>Array</td><td></td><td>A list of icons under grouping, with each item in the array being an object, <code>{ name: &#39;&#39;, icon: &#39;&#39; }</code>，<code>name</code>represents the name of the icon, <code>icon</code>represents the icon, Can be an <code>svg</code> icon, such as <code>&lt;svg ...&gt;&lt;path&gt;&lt;/path&gt;&lt;/svg&gt;</code>, also can be a image <code>url</code>, or <code>base64</code> icon, such as <code>data:image/png;base64,...</code></td></tr></tbody></table><h3 id="_2-export-plugin" tabindex="-1">2.Export plugin <a class="header-anchor" href="#_2-export-plugin" aria-label="Permalink to &quot;2.Export plugin&quot;">​</a></h3><table tabindex="0"><thead><tr><th>Field Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr></thead><tbody><tr><td>exportPadding</td><td>Number</td><td>20</td><td>The padding for exporting images</td></tr><tr><td>exportPaddingX（v0.5.5+）</td><td>Number</td><td>10</td><td>Horizontal padding of graphics when exporting PNG, SVG, and PDF</td></tr><tr><td>exportPaddingY（v0.5.5+）</td><td>Number</td><td>10</td><td>Vertical padding of graphics when exporting PNG, SVG, and PDF</td></tr><tr><td>resetCss（v0.6.16+）</td><td>String</td><td>* { margin: 0; padding: 0; box-sizing: border-box; }</td><td>When exporting images and SVGs, the default style overlay for rich text node content, which is embedded in HTML nodes in SVGs, will occur. If not overlaid, the node content will be offset</td></tr><tr><td>minExportImgCanvasScale（v0.7.0+）</td><td>Number</td><td>2</td><td>The scaling factor of canvas when exporting images and PDFs, which is set to the maximum value of window.devicePixelRatio to improve image clarity</td></tr><tr><td>addContentToHeader（v0.9.9+）</td><td>Function、null</td><td>null</td><td>Add custom content to the header when exporting PNG, SVG, and PDF. Can pass a function that can return null to indicate no content is added, or it can return an object, For a detailed introduction, please refer to section 【How to add custom content when exporting】 below</td></tr><tr><td>addContentToFooter（v0.9.9+）</td><td>Function、null</td><td>null</td><td>The basic definition is the same as addContentToHeader, adding custom content at the end</td></tr><tr><td>handleBeingExportSvg（v0.10.1+）</td><td>Function、null</td><td>null</td><td>When exporting PNG, SVG, and PDF, the SVG data on the canvas will be obtained for cloning, and then exported through the cloned elements. If you want to do some processing on the cloned elements, such as adding, replacing, or modifying some of them, you can pass a processing function through this parameter to receive the SVG element object. After processing, you need to return the original SVG element object.（It should be noted that the node object refers to the element object of the @ svgdotjs/svg. js library, so you need to read the documentation of the library to operate this object）</td></tr><tr><td>maxCanvasSize（v0.11.2+）</td><td>Number</td><td>16384</td><td>Images or PDFs are drawn from SVG using Canvas and then exported. Therefore, if the mind map size is particularly large, the width and height may exceed the upper limit supported by Canvas, so scaling will be performed. This upper limit can be set through this parameter to represent the maximum width and height of Canvas</td></tr></tbody></table><h4 id="_2-1-how-to-add-custom-content-when-exporting" tabindex="-1">2.1 How to add custom content when exporting <a class="header-anchor" href="#_2-1-how-to-add-custom-content-when-exporting" aria-label="Permalink to &quot;2.1 How to add custom content when exporting&quot;">​</a></h4><p>The two instantiation options <code>addContentToHeader</code> and <code>addContentToFooter</code> can be used to add custom content at the beginning and end when exporting <code>png</code>、<code>svg</code>、<code>pdf</code>, The default value is <code>null</code>, which means no configuration. A function can be passed and can return <code>null</code>, which means no content will be added. If you want to add content, you need to return the following structure:</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>{</span></span>
<span class="line"><span>  el,// Custom DOM node to be added, styles can be inline</span></span>
<span class="line"><span>  cssText,// Optional, if the style does not want to be inlined, you can pass this value as a CSS string</span></span>
<span class="line"><span>  height: 50// The height of the returned DOM node must be passed</span></span>
<span class="line"><span>}</span></span></code></pre></div><p>A simple example:</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MindMap</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  addContentToFooter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> el</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;div&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    el.className </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;footer&#39;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    el.innerHTML </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;From: simple-mind-map&#39;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> cssText</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> `</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">      .footer {</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">        width: 100%;</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">        height: 30px;</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">      }</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">    `</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      el,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      cssText,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      height: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><h3 id="_3-select-plugin" tabindex="-1">3.Select plugin <a class="header-anchor" href="#_3-select-plugin" aria-label="Permalink to &quot;3.Select plugin&quot;">​</a></h3><table tabindex="0"><thead><tr><th>Field Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr></thead><tbody><tr><td>selectTranslateStep</td><td>Number</td><td>3</td><td>The canvas offset when mouse moves to the edge during multi-select node</td></tr><tr><td>selectTranslateLimit</td><td>Number</td><td>20</td><td>The distance from the edge when the canvas begins to offset during multi-select node</td></tr></tbody></table><h3 id="_4-drag-plugin" tabindex="-1">4.Drag plugin <a class="header-anchor" href="#_4-drag-plugin" aria-label="Permalink to &quot;4.Drag plugin&quot;">​</a></h3><table tabindex="0"><thead><tr><th>Field Name</th><th>Description</th><th>Type</th><th>Default Value</th></tr></thead><tbody><tr><td>enableFreeDrag（v0.2.4+）</td><td>Enable node free(Free drag means that nodes can be dragged to any position on the canvas. Please note that it is not a function of dragging nodes to become siblings of other nodes. The connection of free drag may have certain problems, so it is best not to use this feature) drag</td><td>Boolean</td><td>false</td></tr><tr><td>nodeDragPlaceholderMaxSize（v0.6.12+）（v0.10.0+ has been abolished）</td><td>When dragging an element, the maximum height of the block indicating the new position of the element</td><td>Number</td><td>20</td></tr><tr><td>autoMoveWhenMouseInEdgeOnDrag（v0.7.1+）</td><td>Whether to enable automatic canvas movement when the mouse moves to the edge of the canvas while dragging nodes</td><td>Boolean</td><td>true</td></tr><tr><td>dragMultiNodeRectConfig（v0.7.2+）</td><td>The style configuration of the schematic rectangle that moves with the mouse when dragging multiple nodes, passing an object, and the field meanings are the width, height, and fill color of the rectangle</td><td>Object</td><td>{ width: 40, height: 20, fill: &#39;rgb(94, 200, 248)&#39; }</td></tr><tr><td>dragPlaceholderRectFill（v0.7.2+）</td><td>The filling color of the schematic rectangle for the new position when dragging nodes.</td><td>String</td><td>rgb(94, 200, 248)</td></tr><tr><td>dragPlaceholderLineConfig（v0.10.0+）</td><td>Style configuration of schematic lines for new positions when dragging nodes</td><td>Object</td><td>{ color: &#39;rgb(94, 200, 248)&#39;, width: 2 }</td></tr><tr><td>dragOpacityConfig（v0.7.2+）</td><td>The transparency configuration during node dragging, passing an object, and the field meanings are: the transparency of the cloned node or rectangle that follows the mouse movement, and the transparency of the dragged node</td><td>Object</td><td>{ cloneNodeOpacity: 0.5, beingDragNodeOpacity: 0.3 }</td></tr><tr><td>beforeDragEnd（v0.10.1+）</td><td>This function is called just before the drag is completed. The function receives an object as a parameter: {overlapNodeUid,prevNodeUid,nextNodeUid,beingDragNodeList}, represents drag and drop information. If you want to prevent this drag and drop, you can return true. At this time, the node.drag event will not be triggered again. Functions can be asynchronous and return Promise instances. &#39;beingDragNodeList&#39; is a newly added callback parameter for v0.10.2+, which is the list of nodes that are currently being dragged</td><td>null、Function</td><td>null</td></tr><tr><td>handleDragCloneNode（v0.10.1+）</td><td>When dragging a single node, the dragged node will be cloned. If you want to modify the cloned node, you can provide a processing function through this option, which receives the cloned node object.（It should be noted that the node object refers to the element object of the @svgdotjs/svg.js library, so you need to read the documentation of the library to operate this object）</td><td>null、Function</td><td>null</td></tr><tr><td>beforeDragStart（v0.10.2+）</td><td>This function is called just before the node is dragged. The function receives the list of node instances to be dragged as parameters. If you want to prevent this drag, you can return true. It can be an asynchronous function that returns a Promise instance</td><td>null、Function（(nodeList) =&gt; {}）</td><td>null</td></tr></tbody></table><h3 id="_5-watermark-plugin" tabindex="-1">5.Watermark plugin <a class="header-anchor" href="#_5-watermark-plugin" aria-label="Permalink to &quot;5.Watermark plugin&quot;">​</a></h3><table tabindex="0"><thead><tr><th>Field Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr></thead><tbody><tr><td>watermarkConfig（v0.2.4+）</td><td>Object</td><td></td><td>Watermark config, Please refer to the table 【Watermark config】 below for detailed configuration</td></tr></tbody></table><h4 id="_5-1watermark-config" tabindex="-1">5.1Watermark config <a class="header-anchor" href="#_5-1watermark-config" aria-label="Permalink to &quot;5.1Watermark config&quot;">​</a></h4><table tabindex="0"><thead><tr><th>Field Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr></thead><tbody><tr><td>text</td><td>String</td><td>&#39;&#39;</td><td>Watermark text. If it is an empty string, the watermark will not be displayed</td></tr><tr><td>lineSpacing</td><td>Number</td><td>100</td><td>Spacing between watermark lines</td></tr><tr><td>textSpacing</td><td>Number</td><td>100</td><td>Spacing between watermarks in the same row</td></tr><tr><td>angle</td><td>Number</td><td>30</td><td>Tilt angle of watermark, range: [0, 90]</td></tr><tr><td>textStyle</td><td>Object</td><td>{color: &#39;#999&#39;, opacity: 0.5, fontSize: 14}</td><td>Watermark text style</td></tr><tr><td>onlyExport（v0.9.2+）</td><td>Boolean</td><td>false</td><td>Is only add watermarks during export</td></tr><tr><td>belowNode（v0.10.0+）</td><td>Boolean</td><td>false</td><td>Is the watermark displayed below the node</td></tr></tbody></table><h3 id="_6-associativeline-plugin" tabindex="-1">6.AssociativeLine plugin <a class="header-anchor" href="#_6-associativeline-plugin" aria-label="Permalink to &quot;6.AssociativeLine plugin&quot;">​</a></h3><table tabindex="0"><thead><tr><th>Field Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr></thead><tbody><tr><td>defaultAssociativeLineText（v0.5.11+）</td><td>String</td><td>关联</td><td>Association Line Default Text</td></tr><tr><td>associativeLineIsAlwaysAboveNode（v0.8.0+）</td><td>Boolean</td><td>true</td><td>Is the associated line always displayed above the node? If set to false, it will be at the top level when creating and activating the associated line, and in other cases, it will be below the node</td></tr><tr><td>associativeLineInitPointsPosition（v0.9.5+）</td><td>null / { from, to }</td><td>{ from: &#39;&#39;, to: &#39;&#39; }</td><td>By default, the position of the two endpoints of a newly created association line is calculated based on the relative position of the center points of the two nodes. If you want to fix the position, you can configure it through this option. If neither from nor to is transmitted, they will be automatically calculated. If only one is transmitted, the other will be automatically calculated. from and to optional values</td></tr><tr><td>：left、top、bottom、right</td><td></td><td></td><td></td></tr><tr><td>enableAdjustAssociativeLinePoints（v0.9.5+）</td><td>Boolean</td><td>true</td><td>Is it allowed to adjust the position of the two endpoints of the associated line</td></tr><tr><td>beforeAssociativeLineConnection（v0.12.0+）</td><td>Function</td><td>null</td><td>You can pass a function that is called when the association line creation is about to be completed. If you want to block this connection, you can return true. The function takes a parameter: node(Target Node Instance)</td></tr></tbody></table><h3 id="_7-richtext-plugin" tabindex="-1">7.RichText plugin <a class="header-anchor" href="#_7-richtext-plugin" aria-label="Permalink to &quot;7.RichText plugin&quot;">​</a></h3><table tabindex="0"><thead><tr><th>Field Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr></thead><tbody><tr><td>richTextEditFakeInPlace（v0.6.13+）</td><td>Boolean</td><td>false</td><td>Set the rich text node edit box to match the size of the node, creating a pseudo in place editing effect. It should be noted that only when there is only text within the node and the shape is rectangular, can the effect be better</td></tr><tr><td>transformRichTextOnEnterEdit（v0.10.0+）</td><td>null、Function</td><td>null</td><td>To convert rich text content, you can pass a function that will be called when entering rich text editing. The function receives the rich text content that is about to be edited and needs to return the processed rich text content</td></tr><tr><td>beforeHideRichTextEdit（v0.10.0+）</td><td>null、Function</td><td>null</td><td>You can pass a function that will be executed before the end of rich text editing. The function receives a richText instance, so you can update the kill document data at this time</td></tr></tbody></table><h3 id="_8-touchevent-plugin" tabindex="-1">8.TouchEvent plugin <a class="header-anchor" href="#_8-touchevent-plugin" aria-label="Permalink to &quot;8.TouchEvent plugin&quot;">​</a></h3><table tabindex="0"><thead><tr><th>Field Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr></thead><tbody><tr><td>disableTouchZoom（v0.8.1+）</td><td>Boolean</td><td>false</td><td>Prohibit double finger scaling, you can still use the API for scaling, which takes effect on the TouchEvent plugin</td></tr><tr><td>minTouchZoomScale（v0.10.1+）</td><td>Number</td><td>20</td><td>Allow maximum and minimum scaling values, percentage, pass -1 to indicate no restrictions</td></tr><tr><td>maxTouchZoomScale（v0.10.1+）</td><td>Number</td><td>-1</td><td>Same as minTouchZoomScale</td></tr></tbody></table><h3 id="_9-scrollbar-plugin" tabindex="-1">9.Scrollbar plugin <a class="header-anchor" href="#_9-scrollbar-plugin" aria-label="Permalink to &quot;9.Scrollbar plugin&quot;">​</a></h3><table tabindex="0"><thead><tr><th>Field Name</th><th>Description</th><th>Type</th><th>Default Value</th></tr></thead><tbody><tr><td>isLimitMindMapInCanvasWhenHasScrollbar（v0.9.2+）</td><td>When registering the Scrollbar plugin, will the mind map be limited to the canvas and the isLimitMindMapInCanvas configuration no longer work</td><td>Boolean</td><td>true</td></tr></tbody></table><h3 id="_10-search-plugin" tabindex="-1">10.Search plugin <a class="header-anchor" href="#_10-search-plugin" aria-label="Permalink to &quot;10.Search plugin&quot;">​</a></h3><table tabindex="0"><thead><tr><th>Field Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr></thead><tbody><tr><td>isOnlySearchCurrentRenderNodes（v0.9.8+）</td><td>Boolean</td><td>false</td><td>Is it necessary to only search for the current rendered node, and nodes that have been collapsed will not be searched for</td></tr></tbody></table><h3 id="_11-cooperate-plugin" tabindex="-1">11.Cooperate plugin <a class="header-anchor" href="#_11-cooperate-plugin" aria-label="Permalink to &quot;11.Cooperate plugin&quot;">​</a></h3><table tabindex="0"><thead><tr><th>Field Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr></thead><tbody><tr><td>beforeCooperateUpdate（v0.9.8+）</td><td>Function、null</td><td>null</td><td>During collaborative editing, node operations are about to be updated to the lifecycle functions of other clients. The function takes an object as a parameter:{ type: 【createOrUpdate（Create or update nodes）、delete（Delete node）】, list: 【Array type, 1.When type=createOrUpdate, it represents the node data that has been created or updated, which will be synchronized to other clients, so you can modify the data; 2.When type=delete, represents the deleted node data】 }</td></tr></tbody></table><h3 id="_12-rainbowlines-plugin" tabindex="-1">12.RainbowLines plugin <a class="header-anchor" href="#_12-rainbowlines-plugin" aria-label="Permalink to &quot;12.RainbowLines plugin&quot;">​</a></h3><table tabindex="0"><thead><tr><th>Field Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr></thead><tbody><tr><td>rainbowLinesConfig（v0.9.9+）</td><td>Object</td><td>{ open: false, colorsList: [] }</td><td>Rainbow line configuration requires registering the RainbowLines plugin first. Object type, Structure: { open: false【Is turn on rainbow lines】, colorsList: []【Customize the color list for rainbow lines. If not set, the default color list will be used】 }</td></tr></tbody></table><h3 id="_13-demonstrate-plugin" tabindex="-1">13.Demonstrate plugin <a class="header-anchor" href="#_13-demonstrate-plugin" aria-label="Permalink to &quot;13.Demonstrate plugin&quot;">​</a></h3><table tabindex="0"><thead><tr><th>Field Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr></thead><tbody><tr><td>demonstrateConfig（v0.9.11+）</td><td>Object、null</td><td>null</td><td>Demonstration plugin configuration. If not transmitted, the default configuration will be used. An object can be transmitted. If only a certain property is configured, only that property can be set. Other properties that have not been set will also use the default configuration. For complete configuration, please refer to the 【Demonstration Plugin Configuration】 section below</td></tr></tbody></table><h4 id="_13-1demonstration-plugin-configuration" tabindex="-1">13.1Demonstration Plugin Configuration <a class="header-anchor" href="#_13-1demonstration-plugin-configuration" aria-label="Permalink to &quot;13.1Demonstration Plugin Configuration&quot;">​</a></h4><table tabindex="0"><thead><tr><th>Field Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr></thead><tbody><tr><td>boxShadowColor</td><td>String</td><td>rgba(0, 0, 0, 0.8)</td><td>The color of the area around the highlighted box</td></tr><tr><td>borderRadius</td><td>String</td><td>5px</td><td>The size of the rounded corners of the highlighted box</td></tr><tr><td>transition</td><td>String</td><td>all 0.3s ease-out</td><td>Transition properties of highlight box animation and CSS transition properties</td></tr><tr><td>zIndex</td><td>Number</td><td>9999</td><td>The hierarchy of highlighted box elements</td></tr><tr><td>padding</td><td>Number</td><td>20</td><td>The inner margin of the highlighted box</td></tr><tr><td>margin</td><td>Number</td><td>50</td><td>The outer margin of the highlighted box</td></tr><tr><td>openBlankMode（v0.9.12+）</td><td>Boolean</td><td>true</td><td>Is enable fill in the blank mode, where underlined text is not displayed by default and only displayed sequentially by pressing the enter key</td></tr></tbody></table><h3 id="_14-formula-plugin" tabindex="-1">14.Formula plugin <a class="header-anchor" href="#_14-formula-plugin" aria-label="Permalink to &quot;14.Formula plugin&quot;">​</a></h3><table tabindex="0"><thead><tr><th>Field Name</th><th>Description</th><th>Type</th><th>Default Value</th></tr></thead><tbody><tr><td>enableEditFormulaInRichTextEdit（v0.10.0+）</td><td>Is enable direct editing of mathematical formulas in the rich text editing box</td><td>Boolean</td><td>true</td></tr><tr><td>katexFontPath（v0.10.3+）</td><td>The request path for font files in the Katex library. Font files will only be requested when Katex&#39;s output is configured as html. The current configuration can be obtained through the mindMap.formula.getKatexConfig() method. The font file can be found in node_modules: katex/dist/fonts/. You can upload it to your server or CDN. The final font request path is <code>${katexFontPath}fonts/KaTeX_AMS-Regular.woff2</code>, which can be concatenated by oneself to test whether it can be accessed</td><td>String</td><td><a href="https://unpkg.com/katex@0.16.11/dist" target="_blank" rel="noreferrer">https://unpkg.com/katex@0.16.11/dist</a></td></tr><tr><td>getKatexOutputType（v0.10.3+）</td><td>Customize the output mode of the Katex library. By default, when the Chrome kernel is below 100, html mode will be used. Otherwise, mathml mode will be used. If you have your own rules, you can pass a function that returns either mathml or html</td><td>Function、null</td><td>null</td></tr></tbody></table><h3 id="_15-outerframe-plugin" tabindex="-1">15.OuterFrame plugin <a class="header-anchor" href="#_15-outerframe-plugin" aria-label="Permalink to &quot;15.OuterFrame plugin&quot;">​</a></h3><table tabindex="0"><thead><tr><th>Field Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr></thead><tbody><tr><td>outerFramePaddingX（v0.10.3+）</td><td>Number</td><td>10</td><td>Horizontal inner margin of the outer frame</td></tr><tr><td>outerFramePaddingY（v0.10.3+）</td><td>Number</td><td>10</td><td>Vertical inner margin of the outer frame</td></tr></tbody></table><h3 id="_16-painter-plugin" tabindex="-1">16.Painter plugin <a class="header-anchor" href="#_16-painter-plugin" aria-label="Permalink to &quot;16.Painter plugin&quot;">​</a></h3><table tabindex="0"><thead><tr><th>Field Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr></thead><tbody><tr><td>onlyPainterNodeCustomStyles（v0.11.1+）</td><td>Boolean</td><td>false</td><td>Is only format the manually set styles for brushing nodes and ignore the styles applied by nodes through themes</td></tr></tbody></table><h3 id="_17-nodeimgadjust-plugin" tabindex="-1">17.NodeImgAdjust plugin <a class="header-anchor" href="#_17-nodeimgadjust-plugin" aria-label="Permalink to &quot;17.NodeImgAdjust plugin&quot;">​</a></h3><table tabindex="0"><thead><tr><th>Field Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr></thead><tbody><tr><td>beforeDeleteNodeImg（v0.11.1+）</td><td>Function</td><td>null</td><td>Intercept the deletion of node images. Clicking the delete button on the node image will call this function before deleting the image. If the function returns true, the deletion will be canceled, can be an asynchronous function that returns a Promise instance</td></tr><tr><td>minImgResizeWidth（v0.12.0+）</td><td>Number</td><td>50</td><td>The minimum width allowed for scaling, please pass in a number &gt;=0</td></tr><tr><td>minImgResizeHeight（v0.12.0+）</td><td>Number</td><td>50</td><td>The minimum height allowed for scaling, please pass in a number &gt;=0</td></tr><tr><td>imgResizeBtnSize（v0.12.0+）</td><td>Number</td><td>25</td><td>Delete and resize the two buttons</td></tr><tr><td>maxImgResizeWidthInheritTheme（v0.12.0+）</td><td>Boolean</td><td>false</td><td>Is the maximum size allowed for scaling based on the theme&#39;s configuration, which uses the theme&#39;s imgMaxWidth and imgMaxHeight settings? If set to false, use the maxImgResizeWidth and maxImgResizeHeight options</td></tr><tr><td>maxImgResizeWidth（v0.12.0+）</td><td>Number</td><td>Infinity</td><td>The maximum width allowed for scaling, which takes effect when the maxImgResizeWidthInheritTheme option is set to false, does not limit the maximum value that can be passed through Infinity</td></tr><tr><td>maxImgResizeHeight（v0.12.0+）</td><td>Number</td><td>Infinity</td><td>The maximum height allowed for scaling, which takes effect when the maxImgResizeWidthInheritTheme option is set to false, does not limit the maximum value that can be passed through Infinity</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><!----></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/mind-map-docs/en/api/constructor/constructor-props.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next</span><span class="title" data-v-e257564d>Props</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT License.</p><p class="copyright" data-v-e315a0ad>Copyright © 2024-present mind-map team</p></div></footer><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"api_batchexecution.md\":\"CpL1COYr\",\"api_command.md\":\"CKB-R46V\",\"api_constructor_constructor-methods.md\":\"DsZDelzJ\",\"api_constructor_constructor-options.md\":\"8BBZ4ug7\",\"api_constructor_constructor-props.md\":\"D30kKm6b\",\"api_keycommand.md\":\"BJXgXO7R\",\"api_markdown.md\":\"CxqgUeiH\",\"api_node.md\":\"DhCkvc5p\",\"api_render.md\":\"DnyWiV1e\",\"api_textedit.md\":\"D9vZBSlW\",\"api_utils.md\":\"CW7ERQHD\",\"api_view.md\":\"BPCnCodU\",\"api_xmind.md\":\"BFFbvkZa\",\"blog.md\":\"BBj4F7hw\",\"client.md\":\"BgQFFUpL\",\"cloudstorage.md\":\"Do58UUNI\",\"course_course1.md\":\"DFK8EDkp\",\"course_course10.md\":\"4v-csSOz\",\"course_course11.md\":\"B9xEVvAJ\",\"course_course12.md\":\"DDIJIJPj\",\"course_course13.md\":\"5IBP-rao\",\"course_course14.md\":\"CC1fwQgh\",\"course_course15.md\":\"D5iYWEY8\",\"course_course16.md\":\"D0wQG2pw\",\"course_course17.md\":\"CJA6F6_y\",\"course_course18.md\":\"BH4yZs16\",\"course_course19.md\":\"UqRwkPwr\",\"course_course2.md\":\"B0W9BdDf\",\"course_course20.md\":\"BPg5uQc2\",\"course_course21.md\":\"CoLYAOVb\",\"course_course22.md\":\"CawwY_0h\",\"course_course23.md\":\"BocE6ttf\",\"course_course24.md\":\"DuSI03vb\",\"course_course25.md\":\"C9dnrwy7\",\"course_course26.md\":\"BkCJk6Hs\",\"course_course27.md\":\"L9aum18K\",\"course_course28.md\":\"DgOxC1eG\",\"course_course29.md\":\"C1QXQu6Q\",\"course_course3.md\":\"DfnuN21w\",\"course_course30.md\":\"B7H4qLQB\",\"course_course31.md\":\"cXaDZjGo\",\"course_course4.md\":\"6pgAw2LX\",\"course_course5.md\":\"ZP4Q9iiA\",\"course_course6.md\":\"C0fxBt7J\",\"course_course7.md\":\"Cuph-HFp\",\"course_course8.md\":\"ChoIxP8Z\",\"course_course9.md\":\"d4gQ06de\",\"en_api_batchexecution.md\":\"B6K-Ywh_\",\"en_api_command.md\":\"6BhEX64G\",\"en_api_constructor_constructor-methods.md\":\"Dc9Zw2sR\",\"en_api_constructor_constructor-options.md\":\"C82q4Cdk\",\"en_api_constructor_constructor-props.md\":\"8b47ZzdH\",\"en_api_keycommand.md\":\"PqfMHK2W\",\"en_api_markdown.md\":\"BSdO0S88\",\"en_api_node.md\":\"DwuEkWyP\",\"en_api_render.md\":\"CPakJa2d\",\"en_api_textedit.md\":\"Biai4Xq7\",\"en_api_utils.md\":\"C--N5wPv\",\"en_api_view.md\":\"DvZzXTZJ\",\"en_api_xmind.md\":\"CkYNjH7w\",\"en_blog.md\":\"Dt38_25W\",\"en_client.md\":\"JcBCndJr\",\"en_index.md\":\"1cVIsvnz\",\"en_plugins_about.md\":\"BUWGpGGx\",\"en_plugins_associativeline.md\":\"DQ7fnKYH\",\"en_plugins_checkbox.md\":\"kVZQRXcu\",\"en_plugins_cooperate.md\":\"D9rwtYWm\",\"en_plugins_demonstrate.md\":\"CVaF8Flk\",\"en_plugins_doexport.md\":\"1engnPn2\",\"en_plugins_drag.md\":\"Bj7U6mi5\",\"en_plugins_excel.md\":\"Bb_v4SjM\",\"en_plugins_formula.md\":\"Bn2eMOAc\",\"en_plugins_freemind.md\":\"DMclvg-J\",\"en_plugins_handdrawnlikestyle.md\":\"ixNqBFyB\",\"en_plugins_keyboardnavigation.md\":\"B9FIErI0\",\"en_plugins_minimap.md\":\"Ckq8cxpd\",\"en_plugins_nodeimgadjust.md\":\"BN6ddm5D\",\"en_plugins_notation.md\":\"C2O7-yEU\",\"en_plugins_numbers.md\":\"Bq4rxFQ-\",\"en_plugins_outerframe.md\":\"dcqaEX5L\",\"en_plugins_painter.md\":\"BPjDkK8N\",\"en_plugins_rainbowlines.md\":\"KB27VR0m\",\"en_plugins_richtext.md\":\"C0xjUJ1Y\",\"en_plugins_scrollbar.md\":\"BTY-WRIo\",\"en_plugins_search.md\":\"oq27WGrC\",\"en_plugins_select.md\":\"BBkzcWfg\",\"en_plugins_themes.md\":\"Cy2wJvDH\",\"en_plugins_touchevent.md\":\"-uR6MDoD\",\"en_plugins_watermark.md\":\"hn2ARitq\",\"en_start_changelog.md\":\"mcHyuMP6\",\"en_start_contribute.md\":\"BRc1GZjd\",\"en_start_deploy.md\":\"CyMntFzl\",\"en_start_introduction.md\":\"BPmJhLYM\",\"en_start_question.md\":\"BNQEVRBY\",\"en_start_start.md\":\"t8Q0EWDl\",\"help_help1.md\":\"BUHB1yvC\",\"help_help2.md\":\"DnwTpD2s\",\"help_help3.md\":\"D5oc_2Ls\",\"help_help4.md\":\"CP5zGCjY\",\"help_help5.md\":\"DNO2uUSL\",\"help_help6.md\":\"BNhR7MF-\",\"index.md\":\"DGLAchCw\",\"plugins_about.md\":\"DYoMr7Ye\",\"plugins_associativeline.md\":\"DYIBkSHw\",\"plugins_checkbox.md\":\"BT_i6sXp\",\"plugins_cooperate.md\":\"Dm0944RZ\",\"plugins_demonstrate.md\":\"D7m2ejPJ\",\"plugins_doexport.md\":\"D9DXqnn7\",\"plugins_drag.md\":\"DvHqkvDB\",\"plugins_excel.md\":\"Bso-N9QM\",\"plugins_formula.md\":\"4-1aZ69F\",\"plugins_freemind.md\":\"tQ8FmSjZ\",\"plugins_handdrawnlikestyle.md\":\"SRc_y_hE\",\"plugins_keyboardnavigation.md\":\"D_O1v-Qq\",\"plugins_minimap.md\":\"CEavzRCD\",\"plugins_nodeimgadjust.md\":\"B5AEnFgt\",\"plugins_notation.md\":\"Da_S_k1x\",\"plugins_numbers.md\":\"DERrL3cA\",\"plugins_outerframe.md\":\"cQsgask1\",\"plugins_painter.md\":\"CyBPCEqq\",\"plugins_rainbowlines.md\":\"DQGhN6QN\",\"plugins_richtext.md\":\"CM1KiL10\",\"plugins_scrollbar.md\":\"C_0OnaGr\",\"plugins_search.md\":\"D_bnL8rb\",\"plugins_select.md\":\"CukB6FsP\",\"plugins_themes.md\":\"HPkGe_d3\",\"plugins_touchevent.md\":\"Cdz_63tT\",\"plugins_watermark.md\":\"1UCHago3\",\"sponsor.md\":\"DEcuXGmu\",\"start_changelog.md\":\"DcdV5GNW\",\"start_contribute.md\":\"V6_XRS2W\",\"start_deploy.md\":\"jxHFH1Ph\",\"start_introduction.md\":\"Dn2yO_zK\",\"start_question.md\":\"bkFCXRSd\",\"start_start.md\":\"lmUjiRmx\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SimpleMindMap\",\"description\":\"A VitePress site\",\"base\":\"/mind-map-docs/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\",\"options\":{\"locales\":{\"root\":{\"placeholder\":\"搜索文档\",\"translations\":{\"button\":{\"buttonText\":\"搜索文档\",\"buttonAriaLabel\":\"搜索文档\"},\"modal\":{\"searchBox\":{\"resetButtonTitle\":\"清除查询条件\",\"resetButtonAriaLabel\":\"清除查询条件\",\"cancelButtonText\":\"取消\",\"cancelButtonAriaLabel\":\"取消\"},\"startScreen\":{\"recentSearchesTitle\":\"搜索历史\",\"noRecentSearchesText\":\"没有搜索历史\",\"saveRecentSearchButtonTitle\":\"保存至搜索历史\",\"removeRecentSearchButtonTitle\":\"从搜索历史中移除\",\"favoriteSearchesTitle\":\"收藏\",\"removeFavoriteSearchButtonTitle\":\"从收藏中移除\"},\"errorScreen\":{\"titleText\":\"无法获取结果\",\"helpText\":\"你可能需要检查你的网络连接\"},\"footer\":{\"selectText\":\"选择\",\"navigateText\":\"切换\",\"closeText\":\"关闭\",\"searchByText\":\"搜索提供者\"},\"noResultsScreen\":{\"noResultsText\":\"无法找到相关结果\",\"suggestedQueryText\":\"你可以尝试查询\",\"reportMissingResultsText\":\"你认为该查询应该有结果？\",\"reportMissingResultsLinkText\":\"点击反馈\"}}}}}}}},\"locales\":{\"root\":{\"label\":\"中文\",\"description\":\"一个强大的Web思维导图\",\"themeConfig\":{\"logo\":\"/logo.png\",\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/wanglin2/mind-map\"}],\"footer\":{\"message\":\"MIT License.\",\"copyright\":\"Copyright © 2024-present mind-map team\"},\"outline\":{\"level\":[2,3]},\"nav\":[{\"text\":\"在线使用\",\"link\":\"https://wanglin2.github.io/mind-map/\"},{\"text\":\"客户端\",\"link\":\"/client\"},{\"text\":\"云存储版\",\"link\":\"/cloudStorage\"},{\"text\":\"开始\",\"link\":\"/start/introduction\",\"activeMatch\":\"/start/\"},{\"text\":\"教程\",\"link\":\"/course/course1\",\"activeMatch\":\"/course/\"},{\"text\":\"API\",\"link\":\"/api/constructor/constructor-options\",\"activeMatch\":\"/api/\"},{\"text\":\"插件\",\"link\":\"/plugins/themes\",\"activeMatch\":\"/plugins/\"},{\"text\":\"使用帮助\",\"link\":\"/help/help1\",\"activeMatch\":\"/help/\"},{\"text\":\"赞助\",\"link\":\"/sponsor\"},{\"text\":\"更多\",\"items\":[{\"text\":\"博客\",\"link\":\"/blog\"},{\"text\":\"理想文档\",\"link\":\"https://github.com/wanglin2/lx-doc\"},{\"text\":\"意见反馈\",\"link\":\"https://github.com/wanglin2/mind-map/issues\"}]}],\"sidebar\":{\"/start/\":[{\"text\":\"简介\",\"link\":\"/start/introduction\"},{\"text\":\"开始\",\"link\":\"/start/start\"},{\"text\":\"常见问题\",\"link\":\"/start/question\"},{\"text\":\"部署\",\"link\":\"/start/deploy\"},{\"text\":\"贡献\",\"link\":\"/start/contribute\"},{\"text\":\"更新记录\",\"link\":\"/start/changelog\"}],\"/course/\":[{\"text\":\"基本使用\",\"link\":\"/course/course1\"},{\"text\":\"操作节点内容\",\"link\":\"/course/course2\"},{\"text\":\"插入/删除节点、前进回退\",\"link\":\"/course/course3\"},{\"text\":\"设置节点样式的简单方式\",\"link\":\"/course/course4\"},{\"text\":\"设置节点样式的更多方式\",\"link\":\"/course/course31\"},{\"text\":\"设置基础样式\",\"link\":\"/course/course5\"},{\"text\":\"显示水印\",\"link\":\"/course/course6\"},{\"text\":\"开启节点自由拖拽\",\"link\":\"/course/course7\"},{\"text\":\"开启节点富文本编辑\",\"link\":\"/course/course8\"},{\"text\":\"修改鼠标滚轮的行为\",\"link\":\"/course/course9\"},{\"text\":\"主题\",\"link\":\"/course/course10\"},{\"text\":\"结构\",\"link\":\"/course/course11\"},{\"text\":\"如何渲染一个大纲\",\"link\":\"/course/course12\"},{\"text\":\"快捷键\",\"link\":\"/course/course13\"},{\"text\":\"如何渲染一个小地图\",\"link\":\"/course/course14\"},{\"text\":\"如何渲染一个右键菜单\",\"link\":\"/course/course15\"},{\"text\":\"如何渲染富文本的悬浮工具栏\",\"link\":\"/course/course16\"},{\"text\":\"导入和导出\",\"link\":\"/course/course17\"},{\"text\":\"如何持久化数据\",\"link\":\"/course/course18\"},{\"text\":\"插入和扩展节点图标\",\"link\":\"/course/course19\"},{\"text\":\"如何自定义节点内容\",\"link\":\"/course/course20\"},{\"text\":\"如何复制、剪切、粘贴\",\"link\":\"/course/course21\"},{\"text\":\"如何实现搜索、替换\",\"link\":\"/course/course22\"},{\"text\":\"如何渲染滚动条\",\"link\":\"/course/course23\"},{\"text\":\"如何开发一个插件\",\"link\":\"/course/course24\"},{\"text\":\"关于概要\",\"link\":\"/course/course25\"},{\"text\":\"如何实现AI生成节点内容\",\"link\":\"/course/course26\"},{\"text\":\"快捷键操作如何传递自定义参数\",\"link\":\"/course/course27\"},{\"text\":\"如何动态修改自定义元素的大小\",\"link\":\"/course/course28\"},{\"text\":\"局域网docker部署解决HTTPS问题的一种方法\",\"link\":\"/course/course29\"},{\"text\":\"如何通过代码激活节点\",\"link\":\"/course/course30\"}],\"/api/\":[{\"text\":\"API\",\"items\":[{\"text\":\"构造函数\",\"base\":\"/api/constructor/constructor-\",\"items\":[{\"text\":\"实例化选项\",\"link\":\"options\"},{\"text\":\"属性\",\"link\":\"props\"},{\"text\":\"方法\",\"link\":\"methods\"}]},{\"text\":\"Node类\",\"link\":\"/api/node\"},{\"text\":\"Render类\",\"link\":\"/api/render\"},{\"text\":\"Command类\",\"link\":\"/api/command\"},{\"text\":\"TextEdit类\",\"link\":\"/api/textEdit\"},{\"text\":\"View类\",\"link\":\"/api/view\"},{\"text\":\"KeyCommand类\",\"link\":\"/api/keyCommand\"},{\"text\":\"BatchExecution类\",\"link\":\"/api/batchExecution\"},{\"text\":\"XMind解析\",\"link\":\"/api/xmind\"},{\"text\":\"Markdown解析\",\"link\":\"/api/markdown\"},{\"text\":\"内置工具方法\",\"link\":\"/api/utils\"}]}],\"/plugins/\":[{\"text\":\"免费\",\"items\":[{\"text\":\"Themes 插件\",\"link\":\"/plugins/themes\"},{\"text\":\"RichText插件\",\"link\":\"/plugins/richText\"},{\"text\":\"Export 插件\",\"link\":\"/plugins/doExport\"},{\"text\":\"Drag插件\",\"link\":\"/plugins/drag\"},{\"text\":\"Select 插件 \",\"link\":\"/plugins/select\"},{\"text\":\"AssociativeLine 插件\",\"link\":\"/plugins/associativeLine\"},{\"text\":\"KeyboardNavigation插件\",\"link\":\"/plugins/keyboardNavigation\"},{\"text\":\"MiniMap插件\",\"link\":\"/plugins/miniMap\"},{\"text\":\"Watermark插件\",\"link\":\"/plugins/watermark\"},{\"text\":\"TouchEvent插件\",\"link\":\"/plugins/touchEvent\"},{\"text\":\"NodeImgAdjust插件\",\"link\":\"/plugins/nodeImgAdjust\"},{\"text\":\"Search插件\",\"link\":\"/plugins/search\"},{\"text\":\"Painter插件\",\"link\":\"/plugins/painter\"},{\"text\":\"Scrollbar插件\",\"link\":\"/plugins/scrollbar\"},{\"text\":\"Formula插件\",\"link\":\"/plugins/formula\"},{\"text\":\"Cooperate插件\",\"link\":\"/plugins/cooperate\"},{\"text\":\"RainbowLines插件\",\"link\":\"/plugins/rainbowLines\"},{\"text\":\"Demonstrate插件\",\"link\":\"/plugins/demonstrate\"},{\"text\":\"OuterFrame插件\",\"link\":\"/plugins/outerFrame\"}]},{\"text\":\"收费\",\"items\":[{\"text\":\"关于收费插件\",\"link\":\"/plugins/about\"},{\"text\":\"HandDrawnLikeStyle插件\",\"link\":\"/plugins/handDrawnLikeStyle\"},{\"text\":\"Notation插件\",\"link\":\"/plugins/notation\"},{\"text\":\"Numbers插件\",\"link\":\"/plugins/numbers\"},{\"text\":\"Freemind插件\",\"link\":\"/plugins/freemind\"},{\"text\":\"Excel插件\",\"link\":\"/plugins/excel\"},{\"text\":\"Checkbox插件\",\"link\":\"/plugins/checkbox\"}]}],\"/help/\":[{\"text\":\"概要/关联线\",\"link\":\"/help/help1\"},{\"text\":\"客户端\",\"link\":\"/help/help2\"},{\"text\":\"打开预览在线文件\",\"link\":\"/help/help3\"},{\"text\":\"复制粘贴\",\"link\":\"/help/help4\"},{\"text\":\"导出\",\"link\":\"/help/help5\"},{\"text\":\"如何编辑数学公式\",\"link\":\"/help/help6\"}]},\"darkModeSwitchLabel\":\"暗黑模式\",\"outlineTitle\":\"大纲\",\"docFooter\":{\"prev\":\"上一篇\",\"next\":\"下一篇\"}}},\"en\":{\"label\":\"English\",\"description\":\"A powerful web mind map\",\"themeConfig\":{\"logo\":\"/logo.png\",\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/wanglin2/mind-map\"}],\"footer\":{\"message\":\"MIT License.\",\"copyright\":\"Copyright © 2024-present mind-map team\"},\"outline\":{\"level\":[2,3]},\"nav\":[{\"text\":\"Online use\",\"link\":\"https://wanglin2.github.io/mind-map/\"},{\"text\":\"Client\",\"link\":\"/en/client\"},{\"text\":\"Cloud storage\",\"link\":\"/cloudStorage\"},{\"text\":\"Start\",\"link\":\"/en/start/introduction\",\"activeMatch\":\"/en/start/\"},{\"text\":\"Course\",\"link\":\"/course/course1\",\"activeMatch\":\"/course/\"},{\"text\":\"API\",\"link\":\"/en/api/constructor/constructor-options\",\"activeMatch\":\"/en/api/\"},{\"text\":\"Plugins\",\"link\":\"/en/plugins/themes\",\"activeMatch\":\"/en/plugins/\"},{\"text\":\"Help\",\"link\":\"/help/help1\",\"activeMatch\":\"/help/\"},{\"text\":\"Sponsor\",\"link\":\"/sponsor\"},{\"text\":\"More\",\"items\":[{\"text\":\"Blog\",\"link\":\"/en/blog\"},{\"text\":\"Ideal Document\",\"link\":\"https://github.com/wanglin2/lx-doc\"},{\"text\":\"Issues\",\"link\":\"https://github.com/wanglin2/mind-map/issues\"}]}],\"sidebar\":{\"/en/start/\":[{\"text\":\"Introduction\",\"link\":\"/en/start/introduction\"},{\"text\":\"Start\",\"link\":\"/en/start/start\"},{\"text\":\"Question\",\"link\":\"/en/start/question\"},{\"text\":\"Deploy\",\"link\":\"/en/start/deploy\"},{\"text\":\"Contribute\",\"link\":\"/en/start/contribute\"},{\"text\":\"Changelog\",\"link\":\"/en/start/changelog\"}],\"/course/\":[{\"text\":\"基本使用\",\"link\":\"/course/course1\"},{\"text\":\"操作节点内容\",\"link\":\"/course/course2\"},{\"text\":\"插入/删除节点、前进回退\",\"link\":\"/course/course3\"},{\"text\":\"设置节点样式的简单方式\",\"link\":\"/course/course4\"},{\"text\":\"设置节点样式的更多方式\",\"link\":\"/course/course31\"},{\"text\":\"设置基础样式\",\"link\":\"/course/course5\"},{\"text\":\"显示水印\",\"link\":\"/course/course6\"},{\"text\":\"开启节点自由拖拽\",\"link\":\"/course/course7\"},{\"text\":\"开启节点富文本编辑\",\"link\":\"/course/course8\"},{\"text\":\"修改鼠标滚轮的行为\",\"link\":\"/course/course9\"},{\"text\":\"主题\",\"link\":\"/course/course10\"},{\"text\":\"结构\",\"link\":\"/course/course11\"},{\"text\":\"如何渲染一个大纲\",\"link\":\"/course/course12\"},{\"text\":\"快捷键\",\"link\":\"/course/course13\"},{\"text\":\"如何渲染一个小地图\",\"link\":\"/course/course14\"},{\"text\":\"如何渲染一个右键菜单\",\"link\":\"/course/course15\"},{\"text\":\"如何渲染富文本的悬浮工具栏\",\"link\":\"/course/course16\"},{\"text\":\"导入和导出\",\"link\":\"/course/course17\"},{\"text\":\"如何持久化数据\",\"link\":\"/course/course18\"},{\"text\":\"插入和扩展节点图标\",\"link\":\"/course/course19\"},{\"text\":\"如何自定义节点内容\",\"link\":\"/course/course20\"},{\"text\":\"如何复制、剪切、粘贴\",\"link\":\"/course/course21\"},{\"text\":\"如何实现搜索、替换\",\"link\":\"/course/course22\"},{\"text\":\"如何渲染滚动条\",\"link\":\"/course/course23\"},{\"text\":\"如何开发一个插件\",\"link\":\"/course/course24\"},{\"text\":\"关于概要\",\"link\":\"/course/course25\"},{\"text\":\"如何实现AI生成节点内容\",\"link\":\"/course/course26\"},{\"text\":\"快捷键操作如何传递自定义参数\",\"link\":\"/course/course27\"},{\"text\":\"如何动态修改自定义元素的大小\",\"link\":\"/course/course28\"},{\"text\":\"局域网docker部署解决HTTPS问题的一种方法\",\"link\":\"/course/course29\"},{\"text\":\"如何通过代码激活节点\",\"link\":\"/course/course30\"}],\"/en/api/\":[{\"text\":\"API\",\"items\":[{\"text\":\"Constructor\",\"base\":\"/en/api/constructor/constructor-\",\"items\":[{\"text\":\"Options\",\"link\":\"options\"},{\"text\":\"Props\",\"link\":\"props\"},{\"text\":\"Methods\",\"link\":\"methods\"}]},{\"text\":\"Node class\",\"link\":\"/en/api/node\"},{\"text\":\"Render clas\",\"link\":\"/en/api/render\"},{\"text\":\"Command clas\",\"link\":\"/en/api/command\"},{\"text\":\"TextEdit clas\",\"link\":\"/en/api/textEdit\"},{\"text\":\"View clas\",\"link\":\"/en/api/view\"},{\"text\":\"KeyCommand clas\",\"link\":\"/en/api/keyCommand\"},{\"text\":\"BatchExecution clas\",\"link\":\"/en/api/batchExecution\"},{\"text\":\"XMind parse\",\"link\":\"/en/api/xmind\"},{\"text\":\"Markdown parse\",\"link\":\"/en/api/markdown\"},{\"text\":\"Utility methods\",\"link\":\"/en/api/utils\"}]}],\"/en/plugins/\":[{\"text\":\"Free\",\"items\":[{\"text\":\"Themes plugin\",\"link\":\"/en/plugins/themes\"},{\"text\":\"RichText plugin\",\"link\":\"/en/plugins/richText\"},{\"text\":\"Export plugin\",\"link\":\"/en/plugins/doExport\"},{\"text\":\"Drag plugin\",\"link\":\"/en/plugins/drag\"},{\"text\":\"Select plugin\",\"link\":\"/en/plugins/select\"},{\"text\":\"AssociativeLine plugin\",\"link\":\"/en/plugins/associativeLine\"},{\"text\":\"KeyboardNavigation plugin\",\"link\":\"/en/plugins/keyboardNavigation\"},{\"text\":\"MiniMap plugin\",\"link\":\"/en/plugins/miniMap\"},{\"text\":\"Watermark plugin\",\"link\":\"/en/plugins/watermark\"},{\"text\":\"TouchEvent plugin\",\"link\":\"/en/plugins/touchEvent\"},{\"text\":\"NodeImgAdjust plugin\",\"link\":\"/en/plugins/nodeImgAdjust\"},{\"text\":\"Search plugin\",\"link\":\"/en/plugins/search\"},{\"text\":\"Painter plugin\",\"link\":\"/en/plugins/painter\"},{\"text\":\"Scrollbar plugin\",\"link\":\"/en/plugins/scrollbar\"},{\"text\":\"Formula plugin\",\"link\":\"/en/plugins/formula\"},{\"text\":\"Cooperate plugin\",\"link\":\"/en/plugins/cooperate\"},{\"text\":\"RainbowLines plugin\",\"link\":\"/en/plugins/rainbowLines\"},{\"text\":\"Demonstrate plugin\",\"link\":\"/en/plugins/demonstrate\"},{\"text\":\"OuterFrame plugin\",\"link\":\"/en/plugins/outerFrame\"}]},{\"text\":\"Charge\",\"items\":[{\"text\":\"Regarding paid plugins\",\"link\":\"/en/plugins/about\"},{\"text\":\"HandDrawnLikeStyle plugin\",\"link\":\"/en/plugins/handDrawnLikeStyle\"},{\"text\":\"Notation plugin\",\"link\":\"/en/plugins/notation\"},{\"text\":\"Numbers plugin\",\"link\":\"/en/plugins/numbers\"},{\"text\":\"Freemind plugin\",\"link\":\"/en/plugins/freemind\"},{\"text\":\"Excel plugin\",\"link\":\"/en/plugins/excel\"},{\"text\":\"Checkbox plugin\",\"link\":\"/en/plugins/checkbox\"}]}],\"/help/\":[{\"text\":\"概要/关联线\",\"link\":\"/help/help1\"},{\"text\":\"客户端\",\"link\":\"/help/help2\"},{\"text\":\"打开预览在线文件\",\"link\":\"/help/help3\"},{\"text\":\"复制粘贴\",\"link\":\"/help/help4\"},{\"text\":\"导出\",\"link\":\"/help/help5\"},{\"text\":\"如何编辑数学公式\",\"link\":\"/help/help6\"}]},\"darkModeSwitchLabel\":\"Dark mode\",\"outlineTitle\":\"Outline\",\"docFooter\":{\"prev\":\"Prev\",\"next\":\"Next\"}}}},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
    
  </body>
</html>